<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>19-flex布局实例 - 简单的左右布局结构</title>
<style type="text/css">
* {
	padding: 0;
	margin: 0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
.box {
	width: 600px;
}
.flex {
	display: flex;
}
.column {
	flex-direction: column;
}
	.ac-c{
		align-items: center;
	}
body {
}
.mt-10 {
	margin-top: 10px;
}
.mb-10 {
	margin-bottom: 10px;
}
.mr-10 {
	margin-right: 10px;
}
.ml-10 {
	margin-left: 10px;
}
.left {
	background-color: rgba(249,31,76,1.00);
	width: 150px;
	height: 100vh;
}
.right {
	background-color: rgba(220,243,31,1.00);
	flex: 1;
	height: 100vh;
}
</style>
</head>

<body>
	<div class="flex ac-c">
	  <div class="left mr-10">此处为新 div 标签的内容</div>
	  <div class="right">此处为新 div 标签的内容</div>
	</div>
</body>
</html>
